<template>
  <div class="sec-top row">
    <form class="form-inline col-sm-5" @submit.prevent="searchUser">
      <div class="form-group form-group-sm">
        <select class="form-control" v-model="searchType">
          <option value="1">手机号</option>
          <option value="2">用户ID</option>
          <option value="3">用户昵称</option>
        </select>
        <input type="text" class="form-control" v-model="searchTxt" placeholder="">
        <input type="submit" class="btn btn-sm btn-primary" value="搜索用户">
      </div>
    </form>
    <div class="col-sm-7 text-right">
      当前拥有贝塔币人数:<span v-text="personNum">***</span>
      当前贝塔币总量：<span v-text="totalBalance">***</span>
      <a v-link="{ path: '/apply/count' }" class="btn btn-sm btn-primary">金贝塔使用统计</a>
      <vue-import-money title="批量导入贝塔币"></vue-import-money>
    </div>
  </div>
  <table class="table table-bordered table-hover">
    <caption>用户列表</caption>
    <thead>
      <tr>
        <th class="col-xs-1">用户ID</th>
        <th class="col-xs-3">用户手机号</th>
        <th class="col-xs-3">用户昵称</th>
        <th class="col-xs-2 text-right mouse" @click="sort">贝塔币余额【点此排序】</th>
        <th class="col-xs-3"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users">
        <td class="col-sm-1">{{user.customerId}}</td>
        <td class="col-sm-3">{{user.phone}}</td>
        <td class="col-sm-3">{{user.nickName}}</td>
        <td class="col-sm-2 text-right">{{user.gold}}</td>
        <td class="col-sm-3 text-right">
          <a v-link="{ path: '/modify/' + user.customerId }" class="btn btn-sm btn-primary">修改记录</a>
          <vue-import-money title="修改贝塔币" :ids.once="user.customerId" :remark.once="user.remark"></vue-import-money>
          <a v-link="{ path: '/user/' + user.customerId }" class="btn btn-sm btn-primary">交易记录</a>
        </td>
      </tr>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="searchUser"></vue-pages>
</template>
<style src="./users.css" scoped></style>
<script src="./users.js"></script>